<template>
  <div id="app">
    <el-config-provider :locale="zhCn">
      <div class="app-header">
        <div class="brand" @click="$router.push('/home')">涂色抢地盘</div>
        <div class="spacer" />
        <div v-if="auth.user" class="user-info">
          <span class="name">{{ auth.user.username }}</span>
          <el-button size="small" @click="logout">退出登录</el-button>
        </div>
        <div v-else>
          <el-button size="small" type="primary" @click="$router.push('/')">登录/注册</el-button>
        </div>
      </div>
      <router-view />
    </el-config-provider>
  </div>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const auth = useAuthStore()
const router = useRouter()

function logout() {
  auth.logout()
  ElMessage.success('已退出登录')
  // 退出登录后自动跳转到登录页面
  router.push('/')
}
</script>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.brand { font-weight: 700; cursor: pointer; }
.spacer { flex: 1; }
.user-info { display: flex; align-items: center; gap: 8px; }
</style>
